<template>
  <div class="echart" :id="eleId" :style="{ width: `${width}px`, height: `${height}px` }"></div>
</template>

<script>
let echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
  name: 'EchartBar',
  computed: {
    eleId () {
      return `echart_${this._uid}`
    }
  },
  props: {
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 300
    },
    options: {
      type: Object
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById(this.eleId))
      myChart.setOption(this.options);
    }
  }
}
</script>

<style lang="less" scoped>

</style>
